{extend name="inherit/list" /}

{block name="title"}配置管理{/block}

{block name="head"}
<style>
    .layui-tab-brief>.layui-tab-title .layui-this {
        color: #009688 !important;
    }

    .layui-form-label {
        width: 120px;
    }

    .layui-input-block {
        margin-left: 150px;
    }

    .layui-form-item .layui-input-inline {
        width: 260px;
    }
</style>
{/block}


{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>消息推送</li>
        <li>在线客服</li>
        <li>公众号配置</li>
        <li>商户号配置</li>
    </ul>
    <div class="layui-tab-content" style="min-height: 400px;">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">系统名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="apply_name" value="{$apply_name}" required lay-verify="required"
                            lay-verType="tips" placeholder="请输入系统名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">服务器URL地址</label>
                    <div class="layui-input-inline" style="width: 650px;">
                        <input type="text" value="{$msg_url}" required lay-verify="required" lay-verType="tips"
                            placeholder="请输入商户号ID" autocomplete="off" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">访问令牌 (token)</label>
                    <div class="layui-input-inline" style="width: 650px;">
                        <input type="text" name="msg_token" value="{$msg_token}" required lay-verify="required"
                            lay-verType="tips" placeholder="请输入访问令牌（token）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline" style="width: 320px;">
                        <input type="text" name="title" value="{$customer_service_text.title}" required
                            lay-verify="required" lay-verType="tips" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">副标题</label>
                    <div class="layui-input-inline" style="width: 320px;">
                        <input type="text" name="subtitle" value="{$customer_service_text.subtitle}" required
                            lay-verify="required" lay-verType="tips" placeholder="请输入副标题" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">在线时间</label>
                    <div class="layui-input-inline" style="width: 320px;">
                        <input type="text" name="online_time" value="{$customer_service_text.online_time}" required
                            lay-verify="required" lay-verType="tips" placeholder="请输入在线时间" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">滚动公告</label>
                    <div class="layui-input-inline" style="width: 320px;">
                        <textarea name="desc" placeholder="请输入滚动公告"
                            class="layui-textarea">{$customer_service_text.note}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">客服二维码</label>
                    <div class="layui-input-inline" style="width: 320px;">
                        <input type="text" name="customer_service_qrcode" value="{$customer_service_qrcode}"
                            lay-verify="required" lay-verType="tips" placeholder="请上传客服微信名片二维码" autocomplete="off"
                            class="layui-input">
                    </div>
                    <button style="float: left;" type="button" class="layui-btn preview">预览</button>
                    <button style="float: left;" type="button" class="layui-btn upload">上传</button>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" data-scene="customer_service" lay-submit
                            lay-filter="update">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">APPID</label>
                    <div class="layui-input-inline" style="width: 290px;">
                        <input type="text" name="appid" value="{$appid}" required lay-verify="required"
                            lay-verType="tips" placeholder="请输入公众号APPID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开发者密钥</label>
                    <div class="layui-input-inline" style="width: 290px;">
                        <input type="text" name="secret" value="{$secret}" required lay-verify="required"
                            lay-verType="tips" placeholder="请输入公众号开发者密钥" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">商户号ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="mch_id" value="{$mch_id}" required lay-verify="required"
                            lay-verType="tips" placeholder="请输入商户号ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商户号API密钥</label>
                    <div class="layui-input-inline">
                        <input type="text" name="mch_key" value="{$mch_key}" required lay-verify="required"
                            lay-verType="tips" placeholder="请输入32位的商户号API密钥" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="foot"}
<script>
    layui.config({
        base: '__layuiadmin__/' //静态资源所在路径
        , version: (new Date).getTime()
    }).extend({
        index: 'lib/index' //主入口模块
        , request: 'plugin/request'
    }).use(['index', 'request', 'upload'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload
            , request = layui.request;

        // 监听提交
        form.on('submit(update)', function (data) {
            var postData = data.field;
            if ($(data.elem).data('scene') == 'customer_service') {
                // 在线客服 重新构建数据格式
                postData = {
                    customer_service_text: {
                        note: postData.note,
                        title: postData.title,
                        subtitle: postData.subtitle,
                        online_time: postData.online_time,
                    },
                    customer_service_qrcode: postData.customer_service_qrcode
                };
            }
            // 发送更新配置请求
            request.ajax("{:u('update')}", 'post', 'json', {
                data: data.field
            }, res => {
                request.log(res, 123)
                parent.layer.msg(res.msg, {
                    time: 1500
                    , shade: .3
                })
            })
            return false;
        });

        // 上传图片
        upload.render({
            elem: '.upload'
            , url: "{:u('upload/image')}"
            , accept: 'images'
            , method: 'get'
            , acceptMime: 'image/*'
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res) {
                console.log(res)
                layer.close(layer.index);
                layer.msg(res.msg, {
                    time: 1500
                })
                $(this.item).prev("button").prev("div").children("input").val(res.url)
            }
        });

        $('.preview').click(function () {
            var img = $(this).prev("div").children("input").val()
            if (img === '') {
                parent.layer.msg('请先上传图片')
            } else {
                parent.layer.photos({
                    photos: {
                        "title": "", //相册标题
                        "id": 123, //相册id
                        "start": 0, //初始显示的图片序号，默认0
                        "data": [   //相册包含的图片，数组格式
                            {
                                "alt": "",
                                "pid": 666, //图片id
                                "src": img, //原图地址
                                "thumb": img //缩略图地址
                            }
                        ]
                    }
                    , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });

            }

        })
    });
</script>
{/block}